<template>
  <!-- 放置一个弹层 用来编辑新增节点 -->
  <div class="dialog">
    <el-dialog :title="adminInfo.title" :visible=" typeof adminInfo.isEdit === 'string' ?  JSON.parse(adminInfo.isEdit) : adminInfo.isEdit  " @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="perForm" :model="adminInfo" :rules="rules">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="adminInfo.nickname" style="width: 90%" />
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadImage"
          >
            <div class="upload-image">
              <img v-if="adminInfo.user_pic" :src="adminInfo.user_pic" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div>
                <span>点击上方图片更换</span>
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="adminInfo.username" style="width: 90%" :disabled="adminInfo.disable" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="adminInfo.isAdd">
          <el-input v-model="adminInfo.password" style="width: 90%" type="password" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="adminInfo.mobile" style="width: 90%" />
        </el-form-item>
        <el-form-item label="角色" prop="role" v-if="adminInfo.name">
          <el-select v-model="adminInfo.name" placeholder="请选择" style="width: 90%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用" v-if="adminInfo.isAdminList">
          <el-switch v-model="isAble" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="space-around">
        <el-col :span="10" style="display:flex;justify:space-around">
          <el-button size="small" type="primary" @click="btnOK" :loading="isLoading">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { roleListOptionAPI } from '@/api/user.js'
export default {
  name: 'Edit',
  props: ['adminInfo'],
  data() {
    return {
      options: [],
      isAble: false,
      isLoading: false,
      formdata:{},
      rules: {
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { min: 3, max: 16, message: '昵称长度应该为3-16位之间', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { min: 5, max: 16, message: '账号长度应该为5-16位之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度应该为6-20位之间', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        // image: [{ required: true, message: '请添加图片', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getRoleData()
    this.formdata = new FormData()
  },
  watch: {
    adminInfo(newVal) {
      console.log(newVal)
      this.isAble = newVal.is_able ? true : false

    },
    isAble(newVal) {
      this.adminInfo.is_able = newVal ? 1 : 0
    }
  },
  methods: {
    async getRoleData() {
      const role = await roleListOptionAPI()
      if (role.status === 1) {
        this.options = role.data
      }
    },
    btnCancel() {
      this.$emit('close', false)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 选择图片上传
    async uploadImage(params) {
      console.log(params)
      this.formdata.set('file',params.file)
      let reader = new FileReader();
      reader.readAsDataURL(params.file);
      reader.onload = ()=>{
        this.adminInfo.user_pic = reader.result
      }
    },
    btnOK() {
      this.isLoading = true
      // console.log(this.adminInfo)
      for (const key in this.adminInfo) {
        if(key !== 'user_pic') this.formdata.set(key,this.adminInfo[key])
      }
      // console.log(this.formdata)
      this.$emit('success', this.formdata)
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader ::v-deep  .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
